在之前想要做 網頁快照、Clipper 類似的擴充功能時,
因為必須要適用所有的網頁,
所以在申明權限時得使用 <all_urls>,
這樣在安裝時會出現 "允許存取所有網站" 這樣令人猶豫的警告,
而 activeTab 就是為了解決上面的問題.
這次的 DEMO 在按下後,
會臨時取得當前頁面的權限,
然後在當前視窗插入一段 CSS 特效,
並且開新分頁來顯示當前資訊.

manifest.json

{
   "manifest_version": 2,
   "name": "ironman6",
   "version": "1.0",  
   "browser_action": {
      "default_title": "Day 16"
   }, 
   "background": {
      "scripts": ["background.js"],
      "persistent": false
   },
   "permissions": [
      "activeTab"
   ]
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.insertCSS({
		code: 
		'div:hover {' + 
			'-webkit-transform: rotate(360deg);' +
			'-webkit-transition: all 1s ease-out;' +
		'}'
	})
	
	var output = [];

	for(item in tab){
		output.push(item + ' : ' + tab[item]);
	}

	chrome.tabs.create({
		url: 'data:text/html;charset=utf-8,' + '<p>' + output.join('<p/><p>') + '</p>'
	})
});